<template>
    <div>
        <div class="verify_box bg_box">
            <div class="container">
                <h2>Verify & Publish Contract Source Code</h2>
                <h5>COMPILER TYPE AND VERSION SELECTION</h5>
                <div class="container_select">
                    <div class="container_text">
                        <img src="../../assets/img/undraw_Security_on_s9ym.svg" width="115"
                            style="margin-top: -15px; margin-bottom: 10px;margin-right:10px">
                        <p>Source code verification provides transparency for users interacting with smart contracts.
                            By uploading the source code, TOK scan will match the compiled code
                            with that on the blockchain.
                            Just like contracts, a "smart contract" should provide end users with more information on what
                            they are
                            "digitally signing" for and give users an opportunity to audit the code to independently verify
                            that
                            it actually does what it is supposed to do.</p>
                    </div>
                    <ul class="verify_ul">
                        <li>
                            <p>Please enter the Contract Address you would like to verify</p>
                            <el-input placeholder="0x..." v-model="address" clearable>
                            </el-input>
                            <span v-if="address == '' && state" class="red">Required</span>
                        </li>
                        <li>
                            <p>Please select Compiler Type</p>
                            <div class="verify_select">
                                <el-select v-model="typeVal" placeholder="">
                                    <el-option v-for="item in typeOptions" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                                <span v-if="typeVal == '[Please Select]' && state" class="red">Required</span>
                            </div>
                        </li>
                        <li>
                            <p>Please select Compiler Version</p>
                            <el-select v-model="versionVal" placeholder="">
                                <el-option v-for="item in versionOptions" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <span v-if="versionVal == '[Please Select]' && state" class="red">Required</span>
                            <!-- <el-checkbox v-model="checked"><i>Un-Check to show all nightly Commits also</i></el-checkbox> -->

                        </li>
                        <li>
                            <p>Please select Open Source License Type </p>
                            <el-select v-model="value" placeholder="">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <span v-if="value == '[Please Select]' && state" class="red">Required</span>
                        </li>
                    </ul>
                    <!-- <div class="flex_ai" style="">
                        <el-checkbox v-model="checked" @change="this.checked = true"></el-checkbox>
                        <i> I agree to the <router-link to="/">terms of service</router-link> </i>
                    </div> -->
                    <div class="v_button">
                        <el-button type="primary" size="large" @click="next"> Continue </el-button>
                        <!-- <span style="padding:0.5rem"></span>
                        <el-button type="info">Reset</el-button> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import version from "@/data/version.json"
// import { useRouter } from 'vue-router'

export default {
    data() {
        return {
            checked: true,
            address: this.$route.query.a,
            state: false,
            typeVal: 'Solidity (Single file)',
            versionVal: '[Please Select]',
            value: '[Please Select]',
            typeOptions: [
                { value: '[Please Select]', },
                { value: 'Solidity (Single file)', }
            ],
            versionOptions: version,
            options: [
                { value: '[Please Select]', },
                { value: '1) No License (None)', },
                { value: '2) The Unlicense (Unlicense)' },
                { value: '3) MIT License (MIT)' },
                { value: '4) GNU General Public License v2.0 (GNU GPLv2)' },
                { value: '5) GNU General Public License v3.0 (GNU GPLv3)' },
                { value: '6) GNU Lesser General Public License v2.1 (GNU LGPLv2.1)' },
                { value: '7) GNU Lesser General Public License v3.0 (GNU LGPLv3)' },
                { value: '8) BSD 2-clause "Simplified" license (BSD-2-Clause)' },
                { value: '9) BSD 3-clause "New" Or "Revised" license (BSD-3-Clause)' },
                { value: '10) Mozilla Public License 2.0 (MPL-2.0)' },
                { value: '11) Open Software License 3.0 (OSL-3.0)' },
                { value: '12) Apache 2.0 (Apache-2.0)' },
                { value: '13) GNU Affero General Public License (GNU AGPLv3)' },
            ],
            // 
        }
    },
    mounted() {
        // alert(this.$route.query.a)
    },
    methods: {
        next() {
            if (this.address == '' || this.typeVal == '[Please Select]' || this.versionVal == '[Please Select]' || this.value == '[Please Select]') {
                this.state = true
                return
            }

            this.$router.push({
                path: 'verifyContractsolc', query: {
                    a: this.$route.query.a,
                    c: this.versionVal,
                    lictype: this.value
                }
            })
        }
    }
}
</script>


<style lang="less" scoped>
.verify_box {
    padding: 50px 0 80px;
    text-align: center;

    h5 {
        color: var(--color-text2);
        padding: 20px 0 10px;
        font-size: 0.75rem;
        border-bottom: 1px solid var(--color-border)
    }

    .container_select {
        max-width: 900px;
        margin: 30px auto 0;
        color: var(--color-text2);
        font-size: 0.85rem;

        .container_text {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        p {
            text-align: justify;
        }
    }

    .verify_ul {

        display: block;
        max-width: 520px;
        margin: 30px auto;
        font-size: 0.9rem;

        :deep(.el-input),
        :deep(.el-select__wrapper) {
            line-height: 40px;
            height: 40px;
            min-height: 40px;
        }

        li {
            margin-bottom: 1.5rem;

            p {
                color: var(--color-text);
                padding: 8px 0;
            }

            .el-checkbox {
                padding-top: 1rem;
                color: var(--color-text2);

                i {
                    font-size: 12px;
                }
            }
        }

    }

    .v_button {
        margin-top: 2rem;
    }

    .flex_ai {
        display: flex;
        align-items: center;
        justify-content: center;

        .el-checkbox {
            margin: 5px;
        }
    }
}
</style>